/*
 * @Author: yangzonglong
 * @Date: 2021-06-09 13:38:15
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 15:31:32
 * @Auditor:
 */
import React, { memo } from 'react';
import { Input } from 'antd';
import { useDrag, DragSourceMonitor, useDrop } from 'react-dnd';
import Icon from './../../icon/Icon';
import styles from './style.module.scss';
import { ColumnType } from './../config';

const type = 'optionSettingItem';

const style: React.CSSProperties = {
  marginBottom: '.5rem',
  cursor: 'move',
};

interface ItemProps {
  originalIndex: number;
  id: string;
  type: string;
}

interface IProps {
  originalIndex: number;
  item: ColumnType;
  remove(index: number): void;
  change(index: number, k: string, v: string): void;
  move(draggedId: string, hoverId: string): void;
  setCurColumn(control: ColumnType): void;
}

const OptionSettingItem = ({ originalIndex, item, remove, change, move, setCurColumn }: IProps) => {
  // const changeTitle = (e: React.BaseSyntheticEvent) => change(originalIndex, 'title', e.target.value);
  // const changeDataIndex = (e: React.BaseSyntheticEvent) => change(originalIndex, 'dataIndex', e.target.value);

  const [{ isDragging }, drag, dragPreview] = useDrag(
    {
      type,
      item: { type, originalIndex, id: item.key as string },

      collect: (moniter: DragSourceMonitor) => ({
        isDragging: moniter.isDragging(), // dragCollect.isDragging
      }),
    },
    []
  );

  const [, drop] = useDrop(
    () => ({
      accept: type,
      canDrop: () => false,
      hover: ({ id: draggedId }: ItemProps) => {
        if (draggedId !== item.key) {
          move(draggedId, item.key as string);
        }
      },
    }),
    [move]
  );

  const opacity = isDragging ? 0 : 1;

  return (
    <li ref={(node) => dragPreview(drop(node))} style={{ ...style, opacity }}>
      <span ref={(node) => drag(node)} className={styles.move}>
        <Icon icon="&#xe671;" />
      </span>
      {/* <Input value={item.title as string} onChange={changeTitle} /> */}
      <Input value={item.title as string} style={{ cursor: 'pointer' }} readOnly onClick={() => setCurColumn({ ...item, originalIndex })} />
      {/* <Input placeholder="dataIndex" value={item.dataIndex as string} onChange={changeDataIndex} /> */}
      <Icon onClick={() => setCurColumn({ ...item, originalIndex })} className={styles.remove} icon="edit" />
      <Icon onClick={() => remove(originalIndex)} className={styles.remove} icon="remove" />
    </li>
  );
};

export default memo(OptionSettingItem);
